<template>
  <div>
    <!-- 导航 -->
    <div class="content">
      <div
        class="content_item toRight"
        v-for="item in menu"
        :key="item.id"
        @click="handleLink(item.link)"
      >
        <p class>{{item.name}}</p>
        <div class="content_p" v-if="item.img">
          <image class="content_img" :src="item.img" />
        </div>

        <p class="content_p" v-else>{{item.text}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu: [
        {
          id: 0,
          name: '头像',
          link: '../my_doctor',
          img:
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3165862407,3625382219&fm=26&gp=0.jpg'
        },
        {
          id: 1,
          name: '昵称',
          text: '杨小飞',
          link: ''
        },
        {
          id: 2,
          name: '手机号',
          text: '杨小飞',
          link: ''
        },
        {
          id: 3,
          name: '账号ID',
          text: '杨小飞',
          link: ''
        },
      ]
    }
  },
  methods: {
    handleLink(url) {
      console.log(url)
      wx.navigateTo({ url })
    }
  }
}
</script>
<style  scoped>
.header {
  height: 400rpx;
  background: linear-gradient(#366ae7, #5e60ea);
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
}
.header_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.header_img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.name {
  font-size: 50rpx;
}
.content {
  margin-top: 40rpx;
}
.content_item {
  position: relative;
  height: 120rpx;
  line-height: 120rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #dddddd;
}
.content_img {
  width: 100rpx;
  height: 100rpx;
}
.content_item p {
  font-size: 40rpx;
}
.content_img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.content_p {
  text-align: right;
  flex: 2;
  margin-right: 20rpx;
}
.toRight::after {
  width: 50rpx;
  height: 50rpx;
  position: relative;
  right: 0;
}
</style>